<template>
  <el-row :gutter="10" class="panel-group">
    <el-col v-if="checkColumns('electrica_fault_status')" :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/equip/records',query:{electrica_fault_status:1}}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="el-fault" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              电路故障
            </div>
            <count-to :start-val="0" :end-val="electrica_fault_count" :duration="2600" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col v-if="checkColumns('sensor_warning_status')" :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/equip/records',query:{sensor_warning_status:1}}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="senor" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              传感器预警
            </div>
            <count-to :start-val="0" :end-val="sensor_fault_count" :duration="3000" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col v-if="checkColumns('leakage_alarm_status')" :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/equip/records',query:{leakage_alarm_status:1}}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="leakage" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              漏水报警
            </div>
            <count-to :start-val="0" :end-val="leakage_fault_count" :duration="3200" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col v-if="checkColumns('atc_status')" :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/equip/records',query:{atc_status:1}}">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="bug" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              空管
            </div>
            <count-to :start-val="0" :end-val="atc_fault_count" :duration="3600" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col v-if="checkColumns('reset_status')" :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/equip/records',query:{reset_status:1}}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="reset" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              发生复位
            </div>
            <count-to :start-val="0" :end-val="reset_fault_count" :duration="3600" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col v-if="checkColumns('reverse_warning_status')" :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/equip/records',query:{reverse_warning_status:1}}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="recover" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              反装预警
            </div>
            <count-to :start-val="0" :end-val="reverse_fault_count" :duration="3600" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col v-if="checkColumns('valve_status')" :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/equip/records',query:{valve_status:2}}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="valve-e" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              阀门异常
            </div>
            <count-to :start-val="0" :end-val="valve_fault_count" :duration="3600" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/equip/records',query:{valve_status:0}}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="valve-closed" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              阀关报警
            </div>
            <count-to :start-val="0" :end-val="valve_off_count" :duration="3600" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/finance/abnormal-bills'}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="bill-e" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              账单异常
            </div>
            <count-to :start-val="0" :end-val="bill_fault_count" :duration="3600" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel" style="position: relative;">
        <router-link :to="{path:'/equip/records',query:{electrica_fault_status:1}}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="low-pressure" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              低压报警
            </div>
            <count-to :start-val="0" :end-val="low_power_count" :duration="3600" class="card-panel-num" style="margin-left: 22px;" />
          </div>
        </router-link>
        <el-tooltip content="设置报警阈值" placement="top">
          <i class="el-icon-setting gear-icon" @click="openSettingDialog" />
        </el-tooltip>
      </div>
    </el-col>
    <el-col :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/equip/records',query:{meter_battery_status:1}}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="undervoltage" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              欠压报警
            </div>
            <count-to :start-val="0" :end-val="qian_ya_count" :duration="3600" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>
    <el-col :xs="4" :sm="4" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <router-link :to="{path:'/equip/records',query:{under_voltage_status:1}}">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="line-segment" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              线断报警
            </div>
            <count-to :start-val="0" :end-val="xian_duan_count" :duration="3600" class="card-panel-num" />
          </div>
        </router-link>
      </div>
    </el-col>

    <!-- 设置对话框 -->
    <el-dialog
      title="设置低压报警阈值"
      :visible.sync="dialogVisible"
      width="30%"
      @close="resetForm"
    >
      <el-form ref="alarmForm" :model="alarmForm" :rules="rules" label-width="100px">
        <el-form-item label="下限阈值" prop="lowerLimit">
          <el-input-number
            v-model="alarmForm.lowerLimit"
            :min="0"
            :max="3.3"
            :step="0.01"
            placeholder="输入下限阈值"
          />
        </el-form-item>
        <el-form-item label="上限阈值" prop="upperLimit">
          <el-input-number
            v-model="alarmForm.upperLimit"
            :min="0"
            :max="3.3"
            :step="0.01"
            placeholder="输入上限阈值"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSettings">保 存</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'
import { dashboardCount, deviceFault } from '@/api/analysis'
import { mapGetters } from 'vuex'

export default {
  components: {
    CountTo
  },
  data() {
    const validateLimits = (rule, value, callback) => {
      if (this.alarmForm.lowerLimit >= this.alarmForm.upperLimit) {
        callback(new Error('下限必须小于上限'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      currentLowerLimit: 0,
      currentUpperLimit: 3.3,
      alarmForm: {
        lowerLimit: 0,
        upperLimit: 3.3
      },
      rules: {
        lowerLimit: [
          { required: true, message: '请输入下限阈值', trigger: 'blur' },
          { validator: validateLimits, trigger: 'change' }
        ],
        upperLimit: [
          { required: true, message: '请输入上限阈值', trigger: 'blur' },
          { validator: validateLimits, trigger: 'change' }
        ]
      },
      leakage_fault_count: 0,
      electrica_fault_count: 0,
      atc_fault_count: 0,
      reset_fault_count: 0,
      reverse_fault_count: 0,
      sensor_fault_count: 0,
      valve_fault_count: 0,
      bill_fault_count: 0,
      low_power_count: 0,
      qian_ya_count: 0,
      xian_duan_count: 0,
      valve_off_count: 0
    }
  },
  created() {
    this.fetchData()
    const savedData = JSON.parse(localStorage.getItem('voltageritical_value'))
    if (Array.isArray(savedData)) {
      this.currentLowerLimit = savedData[0]
      this.currentUpperLimit = savedData[1]
    }
  },
  computed: {
    ...mapGetters([
      'columns'
    ])
  },
  methods: {
    openSettingDialog() {
      this.dialogVisible = true
      // 在打开对话框时，将当前设置的值填充到表单中
      this.alarmForm.lowerLimit = this.currentLowerLimit
      this.alarmForm.upperLimit = this.currentUpperLimit
    },
    saveSettings() {
      this.$refs.alarmForm.validate((valid) => {
        if (valid) {
          this.currentLowerLimit = this.alarmForm.lowerLimit
          this.currentUpperLimit = this.alarmForm.upperLimit
          console.log('保存设置：', this.currentLowerLimit, this.currentUpperLimit)
          dashboardCount({ voltage_critical_value: [this.currentLowerLimit, this.currentUpperLimit] }).then(res => {
            if (res.code === 20000) {
              this.dialogVisible = false
              localStorage.setItem('voltageritical_value', JSON.stringify([this.currentLowerLimit, this.currentUpperLimit]))
              this.$message.success('设置已保存')
            }
          })
          // this.dialogVisible = false;
          // this.$message.success('设置已保存');
        } else {
          this.$message.error('请修正表单中的错误')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.alarmForm.resetFields()
    },
    checkColumns(columns) {
      return this.columns.includes(columns)
    },
    fetchData() {
      dashboardCount({ is_contains_sub: this.$store.getters.showSubData, voltage_critical_value: [1, 2] }).then(res => {
        if (res.code === 20000) {
          this.reverse_fault_count = res.data.reverse_fault_count
          this.reset_fault_count = res.data.reset_fault_count
          this.sensor_fault_count = res.data.sensor_fault_count
          this.atc_fault_count = res.data.atc_fault_count
          this.electrica_fault_count = res.data.electrica_fault_count
          this.leakage_fault_count = res.data.leakage_fault_count
          this.bill_fault_count = res.data.bill_fault_count
          this.valve_fault_count = res.data.valve_fault_count
          this.low_power_count = res.data.low_power_count
          this.qian_ya_count = res.data.qian_ya_count
          this.xian_duan_count = res.data.xian_duan_count
          this.valve_off_count = res.data.valve_off_count
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  .gear-icon {
    // margin-left: 10px;
    position: absolute;
    top: 0.68em;
    right: 4.5em;
    z-index: 999;
    cursor: pointer;
    color: #909399;
    font-size: 18px;
  }

  .gear-icon:hover {
    color: #409eff;
  }
  margin-top: 0;
  padding-bottom: 1.1em;

  .card-panel-col {
    margin-bottom: 0.68em;
  }

  .card-panel {
    height: 4em;
    cursor: pointer;
    font-size: 25px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    border-radius: 5px;

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #dd1100;
      }

      .icon-message {
        background: #dd1100;
      }

      .icon-money {
        background: #dd1100;
      }

      .icon-shopping {
        background: #dd1100
      }
    }

    .icon-people {
      color: #dd1100;
    }

    .icon-message {
      color: #dd1100;
    }

    .icon-money {
      color: #dd1100;
    }

    .icon-shopping {
      color: #dd1100
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 0.25em 0 0 0.25em;
      padding: 0.25em;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 1.65em;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 0.55em 0.5em 0.55em 0.25em;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 0.75em;
      }

      .card-panel-num {
        font-size: 26px;
        color: #dd1100;
      }
    }
  }
}

@media (max-width:1300px) {
  .panel-group {
    .card-panel {
      font-size: 16px;
      .card-panel-description {
        .card-panel-text {
          font-size: 14px;
        }
        .card-panel-num {
          font-size: 18px;
        }
      }
    }
    .gear-icon {
      font-size: 15px;
    }
  }
}
</style>
